<template>
  <div class="min-h-screen flex items-center justify-center bg-gradient-to-r from-blue-50 via-indigo-50 to-purple-50 relative overflow-hidden">
    <!-- 装饰元素 -->
    <div class="absolute top-0 left-0 w-full h-full overflow-hidden opacity-10 pointer-events-none">
      <div class="absolute -top-24 -left-24 w-96 h-96 bg-primary-300 rounded-full mix-blend-multiply filter blur-xl animate-blob"></div>
      <div class="absolute top-1/3 -right-24 w-96 h-96 bg-yellow-200 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-2000"></div>
      <div class="absolute -bottom-24 left-1/3 w-96 h-96 bg-pink-200 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-4000"></div>
    </div>
    
    <div class="max-w-md w-full space-y-8 p-10 bg-white/90 backdrop-blur-sm rounded-2xl shadow-xl relative z-10 border border-gray-100">
      <div class="text-center">
        <LogoTitle subtitle="创建账号，开始你的摄影之旅" />
      </div>
      <form class="mt-8 space-y-6" @submit.prevent="handleRegister">
        <div class="space-y-4">
          <UFormGroup label="用户名">
            <UInput 
              v-model="username" 
              type="text" 
              placeholder="请输入用户名" 
              icon="i-heroicons-user"
              class="transition-all duration-200 focus:ring-2 focus:ring-primary-500"
            />
          </UFormGroup>
          <UFormGroup label="密码">
            <UInput 
              v-model="password" 
              type="password" 
              placeholder="请输入密码" 
              icon="i-heroicons-lock-closed"
              class="transition-all duration-200 focus:ring-2 focus:ring-primary-500"
            />
          </UFormGroup>
          <UFormGroup label="确认密码">
            <UInput 
              v-model="confirmPassword" 
              type="password" 
              placeholder="请再次输入密码" 
              icon="i-heroicons-shield-check"
              class="transition-all duration-200 focus:ring-2 focus:ring-primary-500"
            />
          </UFormGroup>
        </div>
        <div class="flex items-center">
          <UCheckbox v-model="agreeTerms">我同意</UCheckbox>
          <ULink to="/terms" class="ml-2 text-sm text-primary-600 hover:text-primary-500">
            服务条款和隐私政策
          </ULink>
        </div>
        <div>
          <UButton 
            type="submit" 
            color="primary" 
            block 
            :loading="isLoading" 
            :disabled="!agreeTerms"
            class="py-3 text-base font-medium shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5"
          >
            注册
          </UButton>
        </div>
        <div class="text-center pt-2">
          <p class="text-sm text-gray-600">
            已有账号？
            <ULink to="/user/login" class="text-primary-600 hover:text-primary-500 font-medium transition-colors duration-200">
              立即登录
            </ULink>
          </p>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { auth } from '~/utils/auth'

const username = ref('')
const password = ref('')
const confirmPassword = ref('')
const agreeTerms = ref(false)
const isLoading = ref(false)

const handleRegister = async () => {
  try {
    if (password.value !== confirmPassword.value) {
      useToast().add({
        title: '注册失败',
        description: '两次输入的密码不一致',
        color: 'red',
        position: 'top'
      })
      return
    }
    
    if (!agreeTerms.value) {
      useToast().add({
        title: '注册失败',
        description: '请同意服务条款和隐私政策',
        color: 'red',
        position: 'top'
      })
      return
    }
    
    isLoading.value = true
    const response = await auth.register({
      username: username.value,
      password: password.value,
      confirmPassword: confirmPassword.value
    })
    
    if (response.code === 0) {
      // 注册成功
      useToast().add({
        title: '注册成功',
        description: '请使用您的账号登录',
        color: 'green',
        position: 'top'
      })
      // 跳转到登录页
      navigateTo('/user/login')
    }
  } catch (error) {
    console.error('注册失败：', error)
    // 显示错误提示
    useToast().add({
      title: '注册失败',
      description: error instanceof Error ? error.message : '请稍后重试',
      color: 'red',
      position: 'top'
    })
  } finally {
    isLoading.value = false
  }
}
</script>
<style scoped>
.text-primary-600 {
  color: #409EFF;
}
</style>